<template>
  <div class="pagebody">
    <HomeHeadeh></HomeHeadeh>
    <div class="bgfff">
      <div class="container">
        <!-- 导航 -->
        <div class="navigation">
          <div class="nav_font">Pharmacy Captain Homepage</div>
          <img src="@/static/images/public/right_arrow.png" class="arrow">
          <div class="nav_font">Drug name</div>
          <img src="@/static/images/public/right_arrow.png" class="arrow">
          <div class="nav_font">Q&A List Page</div>
          <img src="@/static/images/public/right_arrow.png" class="arrow">
          <div class="nav_font" style="color:#616469;">Article Title</div>
        </div>
        <div class="content">
          <div class="left">
            <div class="head_title">
              <div class="head_title_font">
                Bladder Cancer
              </div>
            </div>
            <div class="cancerlist">
              <nuxt-link :to="{ name: 'distargetbyid', params: { id: item.id, page: 1 } }"
                :class="item.id == diseaseid ? 'cancer_card2' : ''" class="cancer_card csp"
                v-for="(item, index) in cancerList" :key="index">{{ item.name }}</nuxt-link>
            </div>
            <div class="sketch">
              <div class="sketch_title">Bladder Cancer</div>
              <div class="sketch_content">Crohn's disease is a chronic inflammatory granulomatous disorder of unknown
                etiology, mainly affecting the entire digestive tract from the mouth to the anus, but more commonly seen
                in the terminal ileum and adjacent colon. The pathogenesis of Crohn's disease is complex and involves
                multiple factors such as genetics, environment, gut microbiota,</div>
            </div>
            <druglist></druglist>
            <div class="pager">
              <div class="block">
                <el-pagination @current-change="handleCurrentChange" background :current-page="page"
                  :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
            <medicinePrice></medicinePrice>
          </div>
          <right></right>
        </div>

      </div>
    </div>
    <Footer />

  </div>
</template>

<script>
import right from '@/components/right/right'
import medicinePrice from '@/components/news/medicinePrice'
import druglist from '@/components/drugs/druglist'
export default {
  components: {
    right,
    medicinePrice,
    druglist
  },
  async asyncData ({ params, app, error }) {
    let diseaseid = 0
    if (params.id) {
      diseaseid = params.id
    }


    return {
      diseaseid: diseaseid,
      page: Number(params.page),
      total: 999,
    }
  },
  data () {
    return {
      cancerList: [
        { 'name': 'Liver cancer', id: 1, },
        { 'name': 'Thyroid cancer', id: 12, },
        { 'name': 'Kidney cancer', id: 13, },
        { 'name': 'Pancreatic neuroendocrine tumor', id: 14, },
        { 'name': 'Cervical cancer', id: 15, },
        { 'name': 'Gastrointestinal stromal tumor', id: 16, },

      ],
    }
  },
  methods: {
    handleCurrentChange (val) {
      if (this.diseaseid == 0) {
        this.$router.push({ target: '_blank', name: 'distarget', params: { page: val } })
      } else {
        this.$router.push({ target: '_blank', name: 'distargetbyid', params: { id: this.diseaseid, page: val } })

      }
    },
  }


}
</script>

<style lang="scss" scoped>
.pagebody {
  .navigation {
    display: flex;
    justify-content: flex-start;
    padding-top: 26px;
    align-items: center;

    .nav_font {
      font-size: 12px;
      color: #8A95A2;
      line-height: 12px;
      margin-right: 8px;
    }

    .arrow {
      width: 6px;
      height: 10px;
      margin-right: 8px;
    }
  }

  .content {
    display: flex;
    justify-content: space-between;

    .left {
      width: 824px;

      .head_title {
        margin-top: 24px;
        border-bottom: 1px solid #E5E8EB;

        .head_title_font {
          font-weight: bold;
          font-size: 24px;
          width: max-content;
          color: #0041A3;
          line-height: 72px;
          border-bottom: 6px solid #0041A3;
        }
      }

      .cancerlist {
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        margin-top: 16px;

        .cancer_card {
          margin-top: 24px;
          margin-right: 16px;
          background: #E8EFFF;
          border-radius: 24px;
          padding: 16px 24px;
          font-weight: 400;
          font-size: 20px;
          color: #0041A3;
        }

        .cancer_card2 {
          background: #0078FF;
          color: #FFFFFF;
        }
      }

      .sketch {
        margin-top: 27px;
        background: rgba(232, 239, 255, 0.5);
        border-radius: 16px;
        padding: 32px;

        .sketch_title {
          font-size: 20px;
          font-weight: bold;
          line-height: 36px;
          color: #2E343E;
        }

        .sketch_content {
          margin-top: 14px;
          font-size: 18px;
          line-height: 36px;
          color: #2E343E;
        }
      }

      .pager {
        justify-content: end;
        display: flex;
        margin-top: 16px;
      }
    }
  }
}
</style>